<?php
    /**
     * Template Name: Weather report
     * 
     */
    if(!isset($_GET['ajax']) || ((bool)$_GET['ajax']) === false){
        get_header(); 
    }
?>
<!-- layout -->
<div class="rootFrame weather">
    <div class="headline">
        <span class="temperature" id="currTemp">32°C</span>
        <span class="location" id="location">Prague, CZ</span>
    </div>
    <div class="firstLine line">
        <div class="box">
            <div id="currTempRange" class="value">28°C / 32°C</div>
            <div class="title">Temperature range</div>
        </div>
        <div class="box">
            <div class="value" id="currPressure">32°C</div>
            <div class="title">Pressure</div>
        </div>
        <div class="box">
            <div class="value" id="currCloudCover">32°C</div>
            <div class="title">Cloud cover</div>
        </div>
        <div class="box">
            <div class="value" id="currWeatherDesc">Partly cloudy</div>
            <div class="title">Current condition</div>
        </div>
    </div>
    <div class="secondLine line">
        <div class="box">
            <div class="value" id="currPrecipitation">25%</div>
            <div class="title">Precipitation</div>
        </div>
        <div class="box">
            <div class="value" id="currHumidity">32°C</div>
            <div class="title">Humidity</div>
        </div>
        <div class="box">
            <div class="value" id="currWind">11 mph</div>
            <div class="title">Wind</div>
        </div>
    </div>
    <div class="thirdLine infoline forecast">
        <div class="box first">
            <div class="title">Today</div>
            <div class="icon">
                <img src="<?php echo get_template_directory_uri(); ?>/images/icons/weather/01.png" class="icon" />            
            </div>            
            <div class="firstRow">28°C / 32°C</div>
            <div class="secondRow">  
                Mostly Sunny</br>
                0% chance of rain 
            </div>            
        </div>
        <div class="box second">
            <div class="title">Fri 16</div>
            <div class="icon">
                <img src="<?php echo get_template_directory_uri(); ?>/images/icons/weather/116.png" class="icon" />            
            </div>            
            <div class="firstRow">28°C / 32°C</div>
            <div class="secondRow">  
                Mostly Sunny</br>
                0% chance of rain 
            </div>            
        </div>
        <div class="box third">
            <div class="title">Sat 17</div>
            <div class="icon">
                <img src="<?php echo get_template_directory_uri(); ?>/images/icons/weather/116.png" class="icon" />            
            </div>            
            <div class="firstRow">28°C / 32°C</div>
            <div class="secondRow">  
                Mostly Sunny</br>
                0% chance of rain 
            </div>            
        </div>
        <div class="box fourth">
            <div class="title">Sun 18</div>
            <div class="icon">
                <img src="<?php echo get_template_directory_uri(); ?>/images/icons/weather/113.png" class="icon" />            
            </div>            
            <div class="firstRow">28°C / 32°C</div>
            <div class="secondRow">  
                Mostly Sunny</br>
                0% chance of rain 
            </div>            
        </div>
        <div class="box fifth">
            <div class="title">Mon 19</div>
            <div class="icon">
                <img src="<?php echo get_template_directory_uri(); ?>/images/icons/weather/113.png" class="icon" />            
            </div>            
            <div class="firstRow">28°C / 32°C</div>
            <div class="secondRow">  
                Mostly Sunny</br>
                0% chance of rain 
            </div>            
        </div>
    </div>
    <div class="thirdLine infoline bg">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <video class="bg_video" autoplay="autoplay" muted="muted" loop="loop">
<!--      <source src="<?php echo get_template_directory_uri(); ?>/videos/background.webm" type="video/webm" />-->
      <source src="<?php echo get_template_directory_uri(); ?>/videos/bg_spectrum.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
</div>
<!-- logic -->
<script type="text/javascript"> 
    //create namespace for this slide using anonymous function
    (function(){
        var weatherTimer = null;
        //retrive periodicaly weather forecast 
        var weatherForecast = function(){
            ads_pipeline.toJSON({
                service   : 'worldweatheronline.com:complete',
                onSuccess : function(responseJSON, responseText){
                    console.log(responseJSON,"responseJSONWeather");
                    $('currTemp').set('html', responseJSON.data.current_condition[0].temp_C + "°C");
                    $('currTempRange').set('html',  responseJSON.data.weather[0].tempMinC + "°C / " + responseJSON.data.weather[0].tempMaxC + "°C");
                    $('currWeatherDesc').set('html',  responseJSON.data.current_condition[0].weatherDesc[0].value);
                    $('currHumidity').set('html',  responseJSON.data.current_condition[0].humidity + "%");
                    $('currWind').set('html',  responseJSON.data.current_condition[0].windspeedKmph + " km/h");
                    $('currPrecipitation').set('html',  responseJSON.data.current_condition[0].precipMM + " mm");
                    $('currCloudCover').set('html',  responseJSON.data.current_condition[0].cloudcover + "%");
                    $('currPressure').set('html',  responseJSON.data.current_condition[0].pressure + " mb");
                    $('location').set('html', responseJSON.data.request[0].query);
                    var i = 0;
                    $$('.infoline.forecast .box').each(function(el){
                        el.getElement('img').set('src', templateDir + "/images/icons/weather/" + responseJSON.data.weather[i].weatherCode + ".png");
                        el.getElement('div.firstRow').set('html', responseJSON.data.weather[i].tempMinC + "°C / " + responseJSON.data.weather[i].tempMaxC + "°C");
                        el.getElement('div.secondRow').set('html', responseJSON.data.weather[i].weatherDesc[0].value + "<br />Precipitation: " + responseJSON.data.weather[i].precipMM + "mm");
                        i++;
                    });
                }
            });
        }
        //register widget
        var slide = ads_client.getPresentation().getCurrentSlide();   
        slide.registerWidget('widgets', { start : function(){
            //weather forecast
            weatherForecast();
            weatherTimer = weatherForecast.periodical(60*60*1000); 
        }, stop : function(){
            clearInterval(weatherTimer);  
        }});
        //register action
        slide.registerAction('nextSlide', function(){
            //next slide after 20s
            (function(){
                ads_client.getPresentation().slide();
            }).delay(20000); 
        });
    })();
</script>
<?php 
    if(!isset($_GET['ajax']) || ((bool)$_GET['ajax']) === false){
        get_footer(); 
    }
?>